<template>
  <page-header-wrapper>
    <page-tab-list></page-tab-list>
    <a-card :bordered="false">
      <a-form :form="form" :label-col="{ span: 3 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
        <a-form-item label="默认支付方式">
          <a-radio-group v-decorator="['food_pay_type']" @change="onChange">
            <a-radio value="0"> 线上支付 </a-radio>
            <a-radio value="1"> 线下支付 </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="默认结算方式">
          <a-radio-group v-decorator="['default_food_delivery']">
            <a-radio :value="0"> 店内点餐 </a-radio>
            <a-radio :value="1"> 外卖配送 </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item class="pay-checkbox" v-show="showPay" label="支付设置">
          <a-checkbox-group v-decorator="['payType', { initialValue: payList }]">
            <a-row>
              <a-col class="pay-col" v-for="(item, index) in payOptions" :span="24" :key="index">
                <a-checkbox :value="item.value">
                  <a-row style="width: 410px; display: flex; align-items: center">
                    <span>{{ item.default }}</span>
                    <span class="label-self" :class="index > 0 ? 'add-padding' : ''">自定义名称：</span>
                    <a-input style="width: 200px" v-model="item.name" />
                  </a-row>
                </a-checkbox>
              </a-col>
            </a-row>
          </a-checkbox-group>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
          <a-button type="primary" html-type="submit"> 保存 </a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { getFoodSetting, saveFoodSetting } from '@/api/orderMeal'

export default {
  name: '',
  components: {},
  data() {
    return {
      activeTab: '3',
      tabs: [
        {
          value: '0',
          text: '商品管理',
          path: 'FoodGoods',
        },
        {
          value: '1',
          text: '分类',
          path: 'FoodCat',
        },
        {
          value: '2',
          text: '餐桌管理',
          path: 'FoodTableNumber',
        },
        {
          value: '3',
          text: '设置',
          path: 'FoodSetting',
        },
        {
          value: '4',
          text: '店铺点餐二维码',
          path: 'FoodQrcode',
        },
        {
          value: '5',
          text: '轮播图',
          path: 'FoodSwiper',
        },
      ],
      form: this.$form.createForm(this),
      imgSrc: '',
      settingInfo: {},
      showPay: false,
      payOptions: [],
      payList: [],
    }
  },
  watch: {},
  created() {},
  mounted() {
    this.getSetting()
  },
  computed: {},
  filters: {},
  methods: {
    getSetting() {
      getFoodSetting().then((res) => {
        if (!res.code) {
          this.settingInfo = res.data
          this.showPay = this.settingInfo.food_pay_type == 0
          this.payOptions = JSON.parse(JSON.stringify(this.settingInfo.food_payment))
          this.payOptions.forEach((d) => {
            if (d.value == 1) {
              this.payList.push(d.key)
            }
          })

          this.payOptions.forEach((d) => {
            if (d.key == 'alipay') {
              d['default'] = '支付宝支付'
              d['value'] = 'alipay'
              d['payment'] = '4'
              if (d['name']) return
              d['name'] = '支付宝支付'
            }
            if (d.key == 'wechat') {
              d['default'] = '微信支付'
              d['value'] = 'wechat'
              d['payment'] = '1'
              if (d['name']) return
              d['name'] = '微信支付'
            }
            if (d.key == 'huodao') {
              d['default'] = '货到付款'
              d['value'] = 'huodao'
              d['payment'] = '2'
              if (d['name']) return
              d['name'] = '货到付款'
            }
            if (d.key == 'friend') {
              d['default'] = '朋友代付'
              d['value'] = 'friend'
              d['payment'] = '6'
              if (d['name']) return
              d['name'] = '朋友代付'
            }
          })
          this.$nextTick(() => {
            this.form.setFieldsValue({
              food_pay_type: String(this.settingInfo.food_pay_type),
              default_food_delivery: this.settingInfo.default_food_delivery,
            })
          })
        }
      })
    },
    onChange() {
      this.$nextTick(() => {
        if (this.form.getFieldValue('food_pay_type') == 0) {
          this.showPay = true
        } else {
          this.showPay = false
        }
      })
    },
    // changeFoodDelivery
    // tab切换
    tabChange(e) {
      if (e == 3) return
      let item = this.tabs[e]
      this.$router.push({ name: item.path })
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          let arr = this.settingInfo.food_payment
          arr.forEach((d, index) => {
            d.value = 0
            if (values.payType.includes(d.key)) {
              d.value = 1
            }
            d.name = this.payOptions[index].name
          })
          let obj = {
            food_pay_type: values.food_pay_type,
            default_food_delivery: values.default_food_delivery,
            food_payment: JSON.stringify(arr),
          }
          saveFoodSetting(obj).then((res) => {
            if (!res.code) {
              this.$message.success('保存成功！')
            }
          })
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
.pay-checkbox {
  .pay-col {
    width: 100%;
    margin-bottom: 10px;
    /deep/.ant-checkbox-wrapper {
      display: flex;
      align-items: center;
    }
  }
  .pay-col:first-child {
    margin-top: 2px;
  }
  /deep/.ant-form-item-control-wrapper {
    width: 430px;
  }
  .label-self {
    width: 140px;
    text-align: right;
    padding-right: 20px;
  }
  .add-padding {
    width: 153px;
  }
}
</style>
